<!-- 弹出框基础组件 -->
<template>
  <div
    class="popover"
    v-if="visibility"
    ref="popover"
    :style="{ '--left': position, '--top': toTopDistance }"
    :class="{ 'popover-show': showup, 'popover-dis': !showup }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibility: false,
      showup: false,
    };
  },

  components: {},
  props: ["position", "vis", "show", "toTopDistance"],
  computed: {},

  mounted() {
    document.addEventListener("click", this.bodyClose);
  },

  methods: {
    // eslint-disable-next-line no-unused-vars
    bodyClose(e) {
      //   let self = this;
      //   if (!this.$refs.popover.contains(e.target)) {
      //     self.showup = false;
      //     setTimeout(function () {
      //       self.visibility = false;
      //     }, 200);
      //   }
    },
  },
  destroyed() {
    document.removeEventListener("click", this.bodyClose);
  },
  watch: {
    vis(newval) {
      this.visibility = newval;
    },
    show(newval) {
      this.showup = newval;
    },
  },
};
</script>
<style>
.popover {
  position: fixed;
  background-color: white;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  left: calc(var(--left) * 1px - 180px);
  top: calc(var(--top) * 1px);
  padding: 20px;
  border-radius: 3px;
}
.popover-show {
  animation: popovershowup 0.2s cubic-bezier(0.76, 0.24, 0.33, 0.77);
}
.popover-dis {
  animation: popoverdisappear 0.2s cubic-bezier(0.76, 0.24, 0.33, 0.77);
}
@keyframes popovershowup {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes popoverdisappear {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: top;
  }
  100% {
    opacity: 0;
    transform: translateY(-200x) scaleY(0);
    transform-origin: top;
  }
}
</style>